<template>
    <h1>萌える嘘</h1>
    <view class="wallpaper">
        <view class="item" v-for="(item, index) in moeTypes" :key="index" @click="goMoeImg(item)">
            <text> {{ item.label }} </text>
            <image :src="bgList[index]" mode="aspectFill" />
        </view>
    </view>
</template>

<script setup lang="ts">
defineProps({
    bgList: {
        type: Array as any,
        default: []
    }
})
const moeTypes = [
    { label: '全部', value: 'random' },
    { label: '过审', value: 'approve' },
    { label: '精选', value: 'top' },
    { label: '兽耳', value: 'cat' },
    { label: '银发', value: 'yin' },
    { label: '竖屏', value: 'mp' },
    { label: '横屏', value: 'pc' },
    { label: '点兔', value: 'tuzi' },
]
const goMoeImg = (item: any) => {
    uni.navigateTo({
        url: `/pages/moeImg/moeImg?id=${item.value}&title=${item.label}`
    })
}
</script>

<style scoped>
.wallpaper {
    box-shadow: 0.3em 0.3em 0.7em var(--shadow);
    transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding-bottom: 10px !important;
}
</style>